<template>
  <div class="data-statistics c6-container">
    <ContentForm>
      <div slot="searchform" class="form-top">
        <form action="">
          <p class="form-top-p">
            <el-select v-model="valuek.deptCode" clearable placeholder="选择供电段" @change="line">
              <el-option
                v-for="item in formz.selectSection"
                :key="item.value"
                :label="item.deptName"
                :value="item.deptCode" />
            </el-select>
          </p>
          <p class="form-top-p">
            <el-select v-model="valuek.lineCode" clearable placeholder="选择线路">
              <el-option
                v-for="item in formz.selectLin"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </p>
          <p class="form-top-p">
            <el-select v-model="valuek.cType" clearable placeholder="装置类型">
              <el-option
                v-for="item in formz.deviceType"
                :key="item.cType"
                :label="item.cType"
                :value="item.cType" />
            </el-select>
          </p>
          <p class="form-top-p">
            <el-select v-model="valuek.planState" multiple collapse-tags clearable placeholder="选择状态">
              <el-option
                v-for="item in formz.planState"
                :key="item.code"
                :label="item.label"
                :value="item.code" />
            </el-select>
          </p>
          <p class="form-top-p">
            <el-date-picker
              v-model="valuek.selectShij"
              class="input-long"
              type="monthrange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM" />
          </p>
          <p class="form-top-p">
            <el-button type="primary" size="mini" icon="el-icon-search" @click="getlist">查询</el-button>
          </p>
        </form>
      </div>
      <div slot="valueform" class="tableContainer widthPage v-flex-elastic" style="height: calc(100%);">
        <div style="height: calc(100% - 37px);display:flex;">
          <el-table
            v-loading="loading"
            :data="tableData"
            highlight-current-row
            height="100%"
            style="flex:1;"
            border
            stripe
            @row-click="rowClick">
            <el-table-column
              type="index"
              label="序号"
              sortable
              width="70"
              show-overflow-tooltip
              align="center" />
            <el-table-column
              prop="cType"
              label="装置类型"
              sortable
              min-width="90"
              show-overflow-tooltip
              align="center" />
            <el-table-column
              prop="section"
              label="供电段"
              sortable
              show-overflow-tooltip
              min-width="100"
              top
              align="center" />
            <el-table-column
              prop="trainNum"
              label="车次"
              align="center"
              sortable
              show-overflow-tooltip
              min-width="110" />
            <el-table-column
              label="检测开始日期"
              sortable
              min-width="120"
              show-overflow-tooltip
              align="center">
              <template slot-scope="scope">
                {{ parseTime(scope.row.detectStartDate, '{y}-{m}-{d}') }}
              </template>
            </el-table-column>
            <el-table-column
              label="检测结束日期"
              sortable
              min-width="120"
              show-overflow-tooltip
              align="center">
              <template slot-scope="scope">
                {{ parseTime(scope.row.detectEndDate, '{y}-{m}-{d}') }}
              </template>
            </el-table-column>
            <el-table-column
              label="状态"
              align="center"
              sortable
              show-overflow-tooltip
              min-width="90">
              <template slot-scope="scope">
                {{ getstatus(scope.row.status) }}
              </template>
            </el-table-column>
            <el-table-column
              min-width="70"
              align="center"
              fixed="right">
              <template slot="header">
                操作
              </template>
              <template slot-scope="scope">
                <a class="el-icon-view" @click.stop="showDetail(tableData[scope.$index])" />
              </template>
            </el-table-column>
          </el-table>
          <div class="dialog-table" :class="{dialogtan:!ishowtan}">
            <div class="dialog-title" @click="ishowtan=!ishowtan">线路范围<i class="el-icon-close" /></div>
            <el-table
              v-loading="loading"
              :data="tableItemData"
              height="calc(100% - 34px)"
              border
              stripe>
              <el-table-column
                prop="lineAttr.lineName"
                label="线路"
                sortable
                show-overflow-tooltip
                min-width="100"
                top
                align="center" />
              <el-table-column
                prop="directionAttr.directionName"
                label="行别"
                show-overflow-tooltip
                align="center"
                sortable
                min-width="70" />
              <el-table-column
                prop="startSiteAttr.siteName"
                label="开始区站"
                show-overflow-tooltip
                align="center"
                sortable
                min-width="120" />
              <el-table-column
                prop="endSiteAttr.siteName"
                label="结束区站"
                show-overflow-tooltip
                align="center"
                sortable
                min-width="120" />
            </el-table>
          </div>
        </div>
        <div class="block">
          <Pagination
            :hidden="false"
            :total="total"
            :page.sync="queryParams.page"
            :size.sync="queryParams.size"
            @pagination="getlist" />
        </div>
      </div>
    </ContentForm>
    <div class="phm-tanc" :class="{ phmtancshow: isActive }">
      <p class="phm-tanc-top"><span class="el-icon-close" @click="isActive=!isActive" />6C数据详情</p>
      <A6C v-if="isActive" ref="A6c" style="height: calc(100% - 42px);" />
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import A6C from './components/A6cAnalysis.vue'
import { line, getListSection } from '@/api/cms/detect-data/basic'
import { find6CInspectionPlan } from '@/api/cms/Inspection-plan'
export default {
  name: 'PlanStatistics',
  components: {
    A6C
  },
  data() {
    return {
      parseTime: parseTime,
      isActive: false, // 查看详情
      ishowtan: false, // 左侧小弹窗
      loading: false,
      tableData: [],
      tableItemData: [],
      valuek: {
        cType: '', // 装置类型
        planState: [], // 缺陷状态
        deptCode: '',
        selectShij: [],
        lineCode: '' // 选择线路
      },
      formz: {
        selectSection: [], // 所选得供电段
        selectLin: [],
        deviceType: [{ cType: '1C' }, { cType: '2C' }, { cType: '4C' }], // 装置类型
        planState: [{ label: '编制', code: '0' }, { label: '已提交', code: '1' },
          { label: '已审批', code: '2' }, { label: '退回', code: '3' }, { label: '已发布', code: '4' }, { label: '已执行', code: '5' },
          { label: '分析中', code: '6' }, { label: '已分析', code: '7' }
        ]
      },
      total: 0,
      queryParams: {
        page: 1,
        size: 10
      }
    }
  },
  watch: {
  },
  mounted() {
    // 获取当前年月,选择默认时间段 12个月
    const year = new Date().getFullYear()
    const month = new Date().getMonth()
    const startdata = (Number(month) + 2) > 12 ? (Number(year) - 1) + '-01' : (Number(month) + 2) < 10 ? (Number(year) - 1) + `-0${(Number(month) + 2)}` : (Number(year) - 1) + `-${(Number(month) + 2)}`
    const enddata = (Number(month) + 1) < 10 ? year + `-0${(Number(month) + 1)}` : year + `-${(Number(month) + 1)}`
    this.valuek.selectShij = [startdata, enddata]
    getListSection().then(res => {
      const selectSection = []
      if (res.data) {
        res.data.forEach(item => {
          const section = {}
          section.deptCode = item.deptCode + '-' + item.deptName + '-' + item.id
          section.deptName = item.deptName
          selectSection.push(section)
        })
      }
      this.formz.selectSection = selectSection
    })
    this.line()
    this.getlist()
  },
  methods: {
    line(val) {
      var obj = {
        deptId: ''
      }
      if (val) {
        obj.deptId = val.split('-')[2]
      }
      this.valuek.lineCode = ''
      line(obj).then(response => {
        // console.log('线路下拉框', response)
        const lines = []
        if (response.data) {
          response.data.forEach(item => {
            const line = {}
            line.value = item.lineCode + '-' + item.lineName
            line.label = item.lineName
            lines.push(line)
          })
        }
        this.formz.selectLin = lines
      })
    },
    showDetail(val) {
      this.isActive = true
      var that = this
      this.$nextTick(_ => {
        that.$refs.A6c.getList(val)
      })
    },
    getstatus(num) {
      for (const item of this.formz.planState) {
        if (Number(item.code) === num) {
          return item.label
        }
      }
      return ''
    },
    // 点击某行
    rowClick(row, column, event) {
      this.ishowtan = true
      this.tableItemData = row.detectLineList
    },
    // 获取列表
    getlist() {
      var status = ''
      if (this.valuek.planState && this.valuek.planState.length) {
        for (const item of this.valuek.planState) {
          status = status + item + ','
        }
        status = status.substring(0, status.length - 1)
      }

      var obj = Object.assign({}, this.queryParams, {
        startTime: this.valuek.selectShij ? this.valuek.selectShij[0] || '' : '',
        endTime: this.valuek.selectShij ? this.valuek.selectShij[1] || '' : '',
        planState: status,
        cType: this.valuek.cType,
        lineCode: this.valuek.lineCode.split('-')[0] || '',
        section: this.valuek.deptCode.split('-')[1] || ''
      })
      this.tableData = []
      this.loading = true
      find6CInspectionPlan(obj).then(res => {
        if (res.data) {
          this.total = res.data.total
          this.tableData = res.data.records
        }
        this.loading = false
      }).catch(_ => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
.dialog-table{
  position: relative;
  height: 100%;
  width: 420px;
  overflow: hidden;
  border: 1px solid #EBEEF5;
  box-shadow: -2px 0px 2px rgba(0,0,0,.1);
  transition: all 0.4s linear;
  background: #409eff;
  color: white;
  z-index: 10;
  .dialog-title{
    display: flex;
    align-items: center;
    height: 34px;
    line-height: 34px;
    text-align: left;
    padding: 0 10px 0 14px;
    i{
      flex: 1;
      text-align: right;
      font-size: 22px;
      cursor: pointer;
    }
  }
}
.dialogtan{
 width: 0;
 transition: all 0.4s linear;
}
</style>
